<template>
  <div class="lineChart99" ref="lineChart99"></div>
</template>

<script>
import { mapState } from "vuex";
import * as echarts from "echarts";
let options = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "#fff",
      },
    },
  },
  grid: {
    bottom: 80,
    left: 50,
    right: 20,
    top: 50,
  },
  legend: {
    top: "1%",
    right: "1%",
    icon: "circle",
    data: [],
    textStyle: {
      fontSize: 18,
      color: "#C9D2FA",
    },
  },
  xAxis: {
    axisLabel: {
      textStyle: {
        //改变刻度字体样式
        color: "rgba(42,99,158,1)",
        fontSize: 14,
      },
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(49,60,107,0.5)",
        type: [15],
        width: 5,
      },
    }, //坐标轴刻度
    boundaryGap: false,
    data: null,
    //轴线样式
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(49,60,107,0.5)",
        type: [15],
        width: 5,
      },
    },
  },
  yAxis: {
    axisLabel: {
      textStyle: {
        //改变刻度字体样式
        color: "rgba(42,99,158,1)",
        fontSize: 14,
      },
    }, //轴线样式
    splitLine: {
      show: false,
      lineStyle: {
        color: "rgba(49,60,107,0.5)",
        type: [15],
        width: 5,
      },
    },
    type: "value",
  },
  //   dataZoom: [
  //     {
  //       // 设置滚动条的隐藏与显示
  //       show: true,
  //       // 设置滚动条类型
  //       type: "slider",
  //       // 是否显示detail，即拖拽时候显示详细数值信息
  //       showDetail: true,
  //       textStyle: {
  //         color: "#fff",
  //       },
  //       // 数据窗口范围的起始数值
  //       startValue: 0,
  //       // 数据窗口范围的结束数值（一页显示多少条数据）
  //       endValue: 10,
  //       // 设置滚动条宽度，相对于盒子宽度
  //       width: "95%",
  //       // 设置滚动条高度
  //       height: 30,
  //       // 设置滚动条显示位置
  //       left: "center",
  //       // 控制手柄的尺寸
  //       handleSize: 0,
  //       // dataZoom-slider组件离容器下侧的距离
  //       bottom: 30,
  //     },
  //     {
  //       // 没有下面这块的话，只能拖动滚动条，
  //       // 鼠标滚轮在区域内不能控制外部滚动条
  //       type: "inside",
  //       // 滚轮是否触发缩放
  //       zoomOnMouseWheel: false,
  //       // 鼠标滚轮触发滚动
  //       moveOnMouseMove: true,
  //       moveOnMouseWheel: true,
  //     },
  //   ],
  dataZoom: [
    {
      show: true,
      realtime: true,
      startValue: 0,
      // 数据窗口范围的结束数值（一页显示多少条数据）
      endValue: 10,
      height: 15,
      xAxisIndex: [0, 1],
      showDetail: true,
      textStyle: {
        color: "#fff",
      },
      // handleIcon:
      //   "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z",
      bottom: 30,
      backgroundColor: "rgba(27,101,153,1)", //组件的背景颜色
      borderColor: "rgba(27,101,153,1)", //边框颜色。
      // handleStyle: {
      //   color: "rgba(75,167,177,1)",
      //   global: true, // 缺省为 false
      //   borderColor: "rgba(75,167,177,1)",
      //   width: 10,
      // },
    },
    {
      // 没有下面这块的话，只能拖动滚动条，
      // 鼠标滚轮在区域内不能控制外部滚动条
      type: "inside",
      // 滚轮是否触发缩放
      zoomOnMouseWheel: false,
      // 鼠标滚轮触发滚动
      moveOnMouseMove: true,
      moveOnMouseWheel: true,
    },
  ],
  series: [
    {
      type: "line",
      smooth: true, // 设置拆线平滑
      symbolSize: 0,
      data: null,
      lineStyle: {
        color: "rgba(88,179,186,1)",
        width: 8,
      },
      itemStyle: {
        normal: {},
      },
    },
  ],
};
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  computed: {
    ...mapState({
      sidebar: (state) => state.app.sidebar,
    }),
  },
  watch: {
    echartsData: {
      handler(val) {
        if (val) {
          this.setOptionsFn();
        }
      },
      deep: true,
    },
    sidebar: {
      handler(val) {
        if (val) {
          if (this.chart) {
            this.setOptionsFn();
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    setOptionsFn() {
      if (this.chart) {
        this.chart.clear();
      }
      this.chart = echarts.init(this.$refs.lineChart99);
      options.xAxis.data = this.echartsData.arr.map((item) => item.name);
      if (this.echartsData?.smooth) {
        options.series[0].smooth = true;
      }
      if (this.echartsData?.xtextStyle) {
        options.xAxis.axisLabel = {
          ...options.xAxis.axisLabel,
          ...this.echartsData.xtextStyle,
        };
      }
      if (this.echartsData?.gridObj) {
        options.grid = this.echartsData.gridObj;
      }

      options.series[0].data = this.echartsData.arr.map((item) => item.value);
      options.series[0].name = this.echartsData.name;
      options.legend.data = [this.echartsData.name];
      options.series[0].color = `rgb(${this.echartsData.color})`;
      options.series[0].itemStyle.normal = {
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: `rgba(${this.echartsData.color},0.6)`,
            },
            {
              offset: 1,
              color: `rgba(${this.echartsData.color},0)`,
            },
          ]),
        },
      };
      this.chart.setOption(options);
      let _this = this;
      window.addEventListener("resize", function () {
        _this.chart.resize();
      });
    },
    resizeChartFn() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.lineChart99 {
  width: 100%;
  height: 100%;
}
</style>
